<template>
  <div>
    <input type="text" :value="msg" @input="msg = $event.target.value" />
    <p>{{ msg }}</p>
    <MyIpunt v-model="abc"></MyIpunt>
    <MyCeshi v-model="acg" id="b1" ref="c1"></MyCeshi>
    <hr />
    <div id="b1" ref="c2"></div>
    <button @click="fn">点击</button>
    <hr />
    <button v-if="flas" @click="flas = false">按钮</button>
    <input type="text" v-else ref="abc" @blur="flas = true" />
  </div>
</template>

<script>
import MyIpunt from "./components/my-input.vue";
import MyCeshi from "./components/my-ceshi.vue";
export default {
  components: {
    MyIpunt,
    MyCeshi,
  },
  props: {},
  data() {
    return {
      msg: "hello world",
      abc: "hello",
      acg: 123,
      flas: true,
    };
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    fn() {
      console.log(this.$refs.c1);
      console.log(this.$refs.c1);
      this.$$nextTick(() => {
        this.$refs.abc.facus();
      });
    },
  },
};
</script>

<style scoped></style>
